<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:c="http://xmlns.jcp.org/jsf/composite"
	xmlns:p="http://primefaces.org/ui">

<ui:decorate template="/jsp/WEB/pageLayout.xhtml">

	<ui:define name="centro">
		<h:form id="form">
			<p:growl id="msgs" showDetail="true" />

			<p:panel id="tpConsulta" header="Localizar Cliente" toggleable="true"
				toggleSpeed="500" collapsed="true" widgetVar="panel"
				style="margin-bottom:20px">
				<h:panelGrid id="gridCli" columns="5" style="border:0px">
					<p:selectOneMenu value="#{CadClientesBean.tpConsulta}">
						<f:selectItem itemLabel="Nome" itemValue="1" />
						<f:selectItem itemLabel="cpf" itemValue="2" />
					</p:selectOneMenu>

					<p:inputText id="nomes" value="#{CadClientesBean.textoConsulta}" />


					<p:commandButton id="searchButton" image="ui-icon-search"
						update="@all" ajax="false" title="Consultar Cliente"
						actionListener="#{CadClientesBean.searchTpConsulta}" />
				</h:panelGrid>
				<h:outputLabel
					value="Para buscar pelo CPF, digite sem a máscara. Ex:42396855826"
					style="font-size: 9px; margin-left:0%; margin-top:0px" />

			</p:panel>

			<p:panel id="Cadastrar" header="Cadastrar Clientes">

				<br />
				<p:focus context="Cadastrar" />
				<h:panelGrid id="cadClientes" columns="6">

					<h:outputLabel for="nome" value="Nome*: " style="margin-left:5px" />
					<p:inputText id="nome" value="#{CadClientesBean.cli.name}"
						style="margin-left:5px; width:300px" />

					<h:outputLabel for="CPF" value="CPF*: " style="margin-left:25px" />
					<p:inputMask mask="999.999.999-99" id="CPF" size="25"
						style="margin-left:5px; width:95px"
						value="#{CadClientesBean.cli.cpf}" />

					<p:outputLabel for="Tel" value="Telefone:" style="margin-left:25px" />
					<p:inputMask id="Tel" value="#{CadClientesBean.cli.tel}"
						style="margin-left:5px; width:95px" mask="(99) 99999-9999" />
				</h:panelGrid>
				<br />
				<p:separator />


				<!-- ************** Botao teste save / update **************** -->
				<p:commandButton id="salvarAtualizar" value="Cadastrar"
					update="@all" icon="ui-icon-disk" ajax="false"
					actionListener="#{CadClientesBean.insertUpdateCliente}" />

				<p:commandButton id="excluir" value="Excluir"
					onclick="confirmaExclusao.show()" icon="ui-icon-minus" />

			</p:panel>


			<p:panel id="Listas" header="Listagem de Clientes"
				style="margin-top:10px;">
				<p:dataTable id="listarClientes" var="cliente"
					value="#{CadClientesBean.listaCliente}"
					emptyMessage="Nenhum cliente encontrado!"
					style="margin-top:15px; position: auto" paginator="true"
					selectionMode="single" selection="#{CadClientesBean.cliente}"
					rowKey="#{cliente.cpf}">
					<p:ajax event="rowSelect" update=":form:cadClientes"
						listener="#{CadClientesBean.show()}" />

					<p:column style="width: 50px;" sortBy="name">
						<f:facet name="header">Nome</f:facet>
						<h:outputText value="#{cliente.name}" />
					</p:column>

					<p:column style="width: 50px;" sortBy="cpf">
						<f:facet name="header">CPF</f:facet>
						<h:outputText value="#{cliente.cpf}" />
					</p:column>

					<p:column style="width: 50px;" sortBy="tel">
						<f:facet name="header">Telefone</f:facet>
						<h:outputText value="#{cliente.tel}" />
					</p:column>
				</p:dataTable>
			</p:panel>
		</h:form>

		<p:confirmDialog id="confirmaExclusao"
			message="Confirma exclusão deste Cliente?" header="Confirmação"
			severity="alert" widgetVar="confirmaExclusao" modal="true"
			appendTo="@(body)">
			<h:form>
				<p:commandButton id="confirmaBtn" value="Sim"
					onclick="confirmaExclusao.hide()"
					action="#{CadClientesBean.deletarCliente()}" ajax="false"
					icon="ui-icon-check">
				</p:commandButton>
				<p:commandButton id="recusaBtn" value="Não"
					onclick="confirmaExclusao.hide()" icon="ui-icon-close" />
			</h:form>
		</p:confirmDialog>

	</ui:define>
</ui:decorate>
</html>
